<template>
  <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
    <a-card style="margin-top: 12px;">
      <iframe
        class="iframe-view"
        :src="href"
        frameborder="0"
        seamless="seamless"
      >
      </iframe>
    </a-card>
  </page-toggle-transition>
</template>

<script>
import PageToggleTransition from '../components/transition/page-toggle-transition';
import {mapState} from 'vuex'

export default {
  name: 'IFrameView',
  components: {PageToggleTransition},
  props: {
    src: String
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState('setting', ['multiPage', 'animate']),
    href() {
      const { $route = {}, src } = this
      const route = $route
      return src ?? route?.meta?.href
    }
  }
}
</script>

<style scoped lang="less">
  .iframe-view {
    width: 100%;
    height: 100vh;
  }
</style>
